スクロール中の文字をクリックで一時停止
今回は、前回の講座で紹介した「スクロールさせた文字をストップさせる」を改良し、マウスのクリックでスクロールを一時停止&再開させる方法を解説します。訪問者に便利と感じてもらえるように、ぜひとも機能を追加しておきましょう! サンプルページ

→ インラインフレーム、およびフレーム内のHTMLを作成する
 
今回のテクニックは、インラインフレーム&JavaScriptを利用して実現します。まずは、前回の講座を参考にインラインフレームとフレーム内に表示するHTMLファイルを作成してください。もちろん、フレーム内のHTMLファイルにはスクロールを行うJavaScriptも記述しておきます。


→ クリックでスクロールを一時停止
 
続いて、クリックでスクロールを一時停止させる機能を追加します。まずは、インラインフレーム内のHTMLファイルについて、BODYタグにonClickイベントを追加し、マウスのクリックでJavaScript関数「stop()」が実行されるようにします。また、JavaScriptの部分では、画面をスクロールさせるsetInterval()に「sc」というID名を付けておきます。関数「stop()」には、ID名「sc」のsetInterval()を中断させる命令「clearInterval(sc)」を記述してください。これで、マウスのクリックによりスクロールが一時停止するようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<BODY bgcolor="#000000" text="#FFFFFF" onLoad="scroll()" onClick="stop()">
<DIV style="height:150px; margin:0px; padding:0px"></DIV>
<DIV align="center">
  :
(スクロールさせる内容を記述)
  :
</DIV>

<SCRIPT language="JavaScript">
<!--
function scroll(){
window.scrollTo(0,0);
sc=setInterval('window.scrollBy(0,1)',20);
}
function stop(){
clearInterval(sc);
}
// -->
</SCRIPT>

</BODY>

</HTML>

サンプルページ


→ 再クリックでスクロールを再開させる
 
マウスの再クリックでスクロールを再開させるには、JavaScriptを以下のように変更します。具体的には、スクロール中/停止中を識別する変数「f」を用意し、その初期値を0にします。関数「stop()」では、「f」が0の場合にsetInterval()を中断し、「f」の値を1に変更します。「f」が0出ない場合(停止中)は、ID名「sc」で再度「setInterval('window.scrollBy(0,1)',20)」を実行し、変数「f」の値を0(スクロール中)に戻します。これで、マウスクリックにより、スクロールの一時停止&再開を操作できるようになります。
<SCRIPT language="JavaScript">
<!--
function scroll(){
window.scrollTo(0,0);
sc=setInterval('window.scrollBy(0,1)',20);
}
var f=0;
function stop(){
if (f==0){
clearInterval(sc);
f=1;
} else{
sc=setInterval('window.scrollBy(0,1)',20);
f=0;
}
}
// -->
</SCRIPT>
サンプルページ


e[NECir Yahoo yV LINEf[^[z500~`I
z[y[W NWbgJ[h COiq@COsI COze